<template>
  <el-dialog
    title="检查主体"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
    highlight-current
  >
    <el-tree
      :data="data"
      :props="defaultProps"
      accordion
      @node-click="handleNodeClick"
    >
    </el-tree>
    <div class="btn">
      <el-button @click="cancelBtn">取消</el-button>
      <el-button type="primary" @click="sureBtn">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getTreeselect } from "@/api/system/dept";

export default {
  data() {
    return {
      ulDataArr: [],
      navMsgArr: [],
      dateObj: {
        parentCode: 0,
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      inspectData: {},
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
      // 关闭弹窗清楚数据
      this.data = [];
      this.getData();
    },
    handleNodeClick(data) {
      this.inspectData = data;
    },

    // 取消
    cancelBtn() {
      this.handleClose();
    },

    // 确定
    sureBtn() {
      if (!this.inspectData.id) {
        this.$message.warning("请选择要检查的主体");
      } else {
        let obj = {
          id: this.inspectData.id,
          label: this.inspectData.label,
        };
        this.$emit("inspectData", obj);
        this.handleClose();
      }
    },

    getData() {
      let isUserDataMsg = JSON.parse(localStorage.getItem("isUserDataMsg"));
      getTreeselect({ deptId: isUserDataMsg.deptId }) .then((res) => {
        this.data = res.data; 
      });
    },
  },

  created() {
    this.getData();
  },
};
</script>
<style scoped lang="scss">
.btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/deep/ .el-tree-node__content:hover {
  background: rgba(255, 255, 255, 0.05);
}

/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  // background-color: rgba(35, 220, 205, 0.78);
  background-color: #e6a23c;
  color: #ffffff;
}

// /deep/.el-tree {
//   background: #10498f;

//   color: #ffffff;
// }

/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #e6a23c;
  // background-color: rgba(35, 220, 205, 0.78);
  color: #ffffff;
}
</style>